<template>
  <view class="shop">
    <view v-for="shop in shopList" :key="shop.id" class="shop-item">
      <image :src="shop.imgUrl" class="shop-img" />
      <view class="shop-right">
        <view class="shop-one">{{ shop.name }}</view>
        <view class="shop-two">
          月售：{{ shop.sales }} &nbsp;
          起送：{{ shop.expressLimit }} &nbsp;
          基础运费：{{ shop.expressPrice }}
        </view>
        <view class="shop-three">{{ shop.slogan }}</view>
      </view>
    </view>
    <view class="section">
      <view class="category">
        <!-- 通过 :class 动态绑定类名，根据 activeButton 来判断是否添加 active 类 -->
        <view class="category-item" :class="{ active: activeButton === 'total' }" @click="total()">全部商品</view>
        <view class="category-item" :class="{ active: activeButton === 'kill' }" @click="kill()">秒杀</view>
        <view class="category-item" :class="{ active: activeButton === 'fruit' }" @click="fruit()">新鲜水果</view>
      </view>
    </view>
    <view class="product">
      <view v-for="(all, index) in product" :key="all.id" class="list">
        <image :src="all.imgUrl" class="product-img" />
        <view class="center">
          <view class="product-name">{{ all.name }} {{ all.specification }}</view>
          <view class="wenzi">月售{{ all.sales }}件</view>
          <view class="product-price">
            <text class="current-price">{{ all.price }}</text> 
            <text class="old-price">{{ all.oldPrice }}</text> 
          </view>
          <view class="btn">
            <button @click="increase(index)">加入购物车</button>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部购物车图片 -->
    <view class="cart-icon-container" @click="showCartPopup">
      <image src="../imgs/assets/basket.png" class="cart-icon" />
    </view>
    <!-- 购物车弹出窗口 -->
    <view class="cart-popup" v-if="isCartPopupVisible">
      <view class="close-popup" @click="hideCartPopup">×</view>
      <view class="popup-content">
        <view class="popup-header">购物车</view>
        <!-- 这里可以添加购物车具体内容，如商品列表等 -->
        <view v-if="cartItems.length > 0">
          <view v-for="(item, index) in cartItems" :key="index" class="cart-item">
            <image :src="item.imgUrl" class="cart-item-img" />
            <view class="cart-item-info">
              <view class="cart-item-name">{{ item.name }}</view>
              <view class="cart-item-price">价格: {{ item.price }}</view>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="empty-cart">购物车为空</view>
        </view>
      </view>
      <view class="return-btn-container">
        <button @click="hideCartPopup" class="return-btn">返回</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      shopList: [],
      product: [],
      // 添加一个变量来记录当前选中的按钮，初始值设为 'total'
      activeButton: 'total',
      // 新增变量用于控制购物车弹出窗口的显示
      isCartPopupVisible: false,
      // 存储购物车商品
      cartItems: []
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.firstshop();
    this.total();
  },
  methods: {
    firstshop() {
      uni.request({
        url: `http://localhost:3000/data?_id=${this.id}`,
        success: (res) => {
          this.shopList = res.data;
        },
      });
    },
    total() {
      // 点击时更新 activeButton 为 'total'
      this.activeButton = 'total';
      uni.request({
        url: `http://localhost:3000/product-all?shopid=${this.id}`,
        success: (res) => {
          this.product = res.data;
        },
      });
    },
    kill() {
      // 点击时更新 activeButton 为 'kill'
      this.activeButton = 'kill';
      uni.request({
        url: `http://localhost:3000/product-ms?shopid=${this.id}`,
        success: (res) => {
          this.product = res.data;
        },
      });
    },
    fruit() {
      // 点击时更新 activeButton 为 'fruit'
      this.activeButton = 'fruit';
      uni.request({
        url: `http://localhost:3000/product-fruit?shopid=${this.id}`,
        success: (res) => {
          this.product = res.data;
        },
      });
    },
    increase(index) {
      const item = this.product[index];
      // 检查购物车中是否已存在该商品
      const existingItem = this.cartItems.find(cartItem => cartItem._id === item._id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        this.cartItems.push({
          shopid: item.shopid,
          _id: item._id,
          name: item.name,
          imgUrl: item.imgUrl,
          price: item.price,
          oldPrice: item.oldPrice,
          quantity: 1
        });
      }
      uni.request({
        url: "http://localhost:3000/cart",
        method: 'POST',
        data: {
          shopid: item.shopid,
          _id: item._id,
          name: item.name,
          imgUrl: item.imgUrl,
          price: item.price,
          oldPrice: item.oldPrice,
          quantity: 1
        },
        success: (res) => {
          console.log(res.data.message);
          uni.showToast({
            title: "加入成功",
            icon: "success"
          });
        }
      });
    },
    // 显示购物车弹出窗口
    showCartPopup() {
      this.isCartPopupVisible = true;
    },
    // 隐藏购物车弹出窗口
    hideCartPopup() {
      this.isCartPopupVisible = false;
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.shop {
  background-color: #fff;
  padding-bottom: 60px; /* 为底部购物车图标预留空间 */
}

.shop-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e9e7e7;
  padding: 15px;
}

.shop-img {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}

.shop-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-one {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.shop-two {
  font-size: 16px;
  color: #666;
}

.shop-three {
  font-size: 16px;
  color: #f40;
}

.section {
  width: 20%;
  float: left;
}

.category {
  display: flex;
  flex-direction: column;
  background-color: rgb(244, 246, 248);
}

.category-item {
  padding: 10px 15px;
  font-size: 18px;
  margin: 0 auto;
  color: #333;
  cursor: pointer;
  display: flex;
}

/* 定义 active 类的样式，实现按钮变色 */
.category-item.active {
  background-color:rgb(0, 153, 255);
  color: white;
}

.product {
  width: 80%;
  float: left;
}

.list {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e9e7e7;
  padding: 10px 15px;
  position: relative;
}

.product-img {
  width: 100px;
  height: 100px;
  margin-right: 15px;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.product-name {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.wenzi {
  font-size: 14px;
  color: #666;
}

.product-price {
  display: flex;
  align-items: center;
}

.current-price {
  font-size: 16px;
  font-weight: 600;
  color: #f40;
  margin-right: 10px;
}

.old-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.btn {
  display: flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.btn button {
  width: 80px;
  height: 40px;
  border: 1px solid #ccc;
  background-color: #5fb6f0;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}

/* 底部购物车图标样式 */
.cart-icon-container {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  cursor: pointer;
}

.cart-icon {
  width: 40px;
  height: 40px;
}

/* 购物车弹出窗口样式 */
.cart-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  background: linear-gradient(135deg, #f9f9f9, #e9e9e9);
  padding: 20px;
  border-radius: 20px;
  width: 80%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  position: relative;
}

.popup-header {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.close-popup {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 28px;
  cursor: pointer;
  color: #888;
  transition: color 0.3s ease;
}

.close-popup:hover {
  color: #333;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}

.cart-item-img {
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.cart-item-info {
  display: flex;
  flex-direction: column;
}

.cart-item-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.cart-item-price {
  font-size: 16px;
  color: #666;
}

.empty-cart {
  text-align: center;
  font-size: 18px;
  color: #999;
  margin-top: 20px;
}

.return-btn-container {
  text-align: center;
  margin-top: 30px;
}

.return-btn {
  width: 150px;
  height: 45px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

.return-btn:hover {
  background-color: #0056b3;
}
</style>    